<template>
		<div class="box">
			<div id="myChart100"></div>
		</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import echarts from "@/common/utils/echarts";
import { cockpitApi } from "@/api/investment";

const props = defineProps({
	year: {
		type: String,
		default: () => {
			let date = new Date(); // 获取时间
			return date.getFullYear(); // 获取年
		},
	},
});

const currentIndex = ref(0);

const menuArr = ref([
	{
		title: "季度",
	},
	{
		title: "年度",
	},
]);

/**
 * 选中
 * @param index
 */
const onSelect = (index) => {
	currentIndex.value = index;
};

let option = {
	grid:{
		top:'10%',
		bottom:'10%'
	},
	xAxis: {
		type: "category",
		data: [],
	},
	yAxis: {
		type: "value",
	},
	series: [
		{
			data: [],
			type: "bar",
			itemStyle: {
				color: "#EACAA7",
			},
		},
		{
			data: [],
			type: "bar",
			itemStyle: {
				color: "#9996b3",
			},
		},
	],
};

/**
 * 初始花echarts
 * @private
 */
const myChart100 = ref(null);
const _init = async (params) => {
	const res = await cockpitApi.getPlanExecuteSns(params);
	res.data.content.forEach((item) => {
		option.xAxis.data.push(item.projectName);
		option.series[0].data.push(item.realAmount);
		option.series[1].data.push(item.planAmount);
	});
	myChart100.value = echarts.init(document.getElementById("myChart100"));
	myChart100.value.setOption(option);
};

/**
 * 搜索
 */
const onSearch = () => {
	_init({ pageNum: 1, pageSize: 9999, param: { year: props.year } });
};

defineExpose({
	onSearch,
});

onMounted(() => {
	_init({ pageNum: 1, pageSize: 9999, param: { year: props.year } });
});
</script>

<style lang="scss" scoped>
#myChart100 {
	width: 100%;
	height: 100%;
}
.box {
	padding: 10px;
	width: 100%;
	height: 262px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.05);
}


</style>
